<template>
  <el-cascader
    class="c-positon"
    :class="{ noempty: placeholder !== '请选择'&&!disabled }"
    v-bind="$attrs"
    ref="el"
    :disabled='disabled'
    :props="positionProps"
    v-model="filterValue"
    :optins="optinsCitys"
    :placeholder="placeholder"
    @change="handleChange"
    @visible-change="visibleChange"
    @expand-change="expandChange"
    style="minWidth:50%"
  ></el-cascader>
</template>

<script>
import { getCitys } from "@/api/public";
export default {
  name: "CitySelect",
  props: {
    value: {},
    placeholder: {
      default: "请选择",
    },
    disabled:{
      type:Boolean,
      default:false,
    },
    // 是否可以选任意层级的数据返回，不必选最小层级，默认值true, 表示可以选择任意层级数据返回
    jumpable: {
      type:Boolean,
      default: true,
    }
  },
  data() {
    return {
      optinsCitys: [],
      positionProps: {
        lazy: true,
        label: "cityName",
        value: "cityId",
        emitPath: false,
        checkStrictly: this.jumpable,
        lazyLoad(node, resolve) {
          const { level, data } = node;
          if (level === 0) {
            getCitys({
              pageNum: 1,
              pageSize: 999,
              // parent: 0,
              // cityLevel: 1,
              parentCityId: "370000",
            }).then((res) => {
              this.optinsCitys = res.rows;
              resolve(res.rows);
            });
          } else {
            getCitys({
              pageNum: 1,
              pageSize: 999,
              parentCityId: data.cityId,
            }).then((res) => {
              let { rows } = res;
              rows = rows.map((item) => {
                item.leaf = level >= 2;
                return item;
              });
              resolve(rows);
            });
          }
        },
      },
    };
  },
  computed: {
    filterValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  methods: {
    //处理单选点击事件
    handleChange(id) {
      const name= this.$refs.el.getCheckedNodes()[0].pathLabels.join('/');
      this.$nextTick(() => {
        const dom = document.getElementsByClassName("el-radio is-checked");
        //这里我把dom打出来看了 最后一个选项才是我选中的节点 即[length-1] 有的博主写的是 第一个元素 即[0] 大家自行尝试
        let radioDom = dom[dom.length - 1];
        const brother = radioDom.nextElementSibling;
        brother.click();
      });
      this.$emit('change',id)
    },
    // 解決頁面卡死
    visibleChange(val) {
      if (val) {
		  //此处可以出来选中下拉选项，清空input搜索值
      }
      this.$nextTick(() => {
        // 添加这段代码
        const $el = document.querySelectorAll('.el-cascader-panel .el-cascader-node[aria-owns]');
        Array.from($el).map((item) => item.removeAttribute('aria-owns'));
      });
    },
    expandChange() {
      this.$nextTick(() => {
        const $el = document.querySelectorAll('.el-cascader-panel .el-cascader-node[aria-owns]');
        Array.from($el).map((item) => item.removeAttribute('aria-owns'));
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.c-positon.noempty {
  ::v-deep .el-input__inner::placeholder {
    color: #606266 !important;
  }
}
</style>
